<!-- 表单的筛选 -->
<template>
  <el-row type="flex" justify="start" align="middle">
    <BaseSelect
     :dataOptions="options"
      @onDataChanged="onDataChanged"
      ref="baseSelect" 
      :showTitle="showTitle"
      :title="'状态'"
      ></BaseSelect>
  </el-row>
</template>


<script lang="ts">
import { defineComponent,ref } from 'vue'
import { BaseSelect } from './'

export default defineComponent({
  name: 'DefaultStatusSelect',
  components: {
    BaseSelect
  },
  props:{
    // 是否显示标题
    showTitle:{
      type: Boolean,
      default: true,
      required: false
    },

  },
  data(){
    return {
      data: null,
      options: [] as any
    }
  },

  methods:{

    init(suc?:any) {

      let titles = ["全部","可用","不可用","已删除"];
      let vals = [-1,0,1,2];

      let dataOptions = []

      for (let index = 0; index < titles.length; index++) {
        const title = titles[index];
        const value = vals[index];
        dataOptions.push({
          "title":title,
          "value":value
        });        
      }

      this.options = dataOptions;
    },

    setData(val:any){
      this.baseSelect.setData(val);
    },

    clear() {
      this.data = null;
    },

    onDataChanged(val:any){
      this.data = val;
    }

  },

  watch: {
    data: function(oldval:any,newval:any){
      this.$emit("onDataChanged",this.data);
    }
  },

  created() {
     this.init();
  },

  mounted(){
     
  },

  setup(){
    const baseSelect = ref();


    return {
      baseSelect
    }

    // const store = useStore()

    // return {
    //   LoginByUsername:(userObj:any)=> store.dispatch('LoginByUsername')
    // }

  }


})



</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style lang="scss" scoped>



</style>
